<template>
	<xh-container btnText="保存" @onSave="handleClickSubmit" :title="formData.id ? '编辑' : '新增'">
		<view class="container">
			<uni-forms ref="form1" :rules="rules1" :modelValue="formData" :label-width="80" label-align="right">
				<uni-forms-item label="裁剪日期" name="cuttingDate" required>
					<uni-datetime-picker type="date" v-model="formData.cuttingDate" />
				</uni-forms-item>
				<uni-forms-item label="裁片编号" name="cuttingCode" required>
					<uni-easyinput v-model="formData.cuttingCode" placeholder="请输入" disabled />
				</uni-forms-item>
				<uni-forms-item label="产品名称" name="productName" required>
					<uni-easyinput v-model="formData.productName" placeholder="请输入" disabled />
				</uni-forms-item>
				<uni-forms-item label="检验编码" name="inspectCode" required>
					<uni-easyinput v-model="formData.inspectCode" placeholder="手动输入" v-if="inspectCodeList.length == 0"/>
					<uni-data-select v-model="formData.inspectCode" :localdata="inspectCodeList" v-else />
				</uni-forms-item>
				<uni-forms-item label="卷数" name="volumesNum">
					<uni-easyinput v-model="formData.volumesNum" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="层数" name="layersNum">
					<uni-easyinput v-model="formData.layersNum" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="铺布长度" name="fabricLength">
					<uni-easyinput v-model="formData.fabricLength" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item label="码单图片" name="barcodeImage">
					<xh-image :src="formData.barcodeImage" @onSuccess="handleSuccessImg" />
				</uni-forms-item>
			</uni-forms>
		</view>
	</xh-container>
</template>

<script>
	import {
		deleteCuttingLayingFabric,
		editCuttingLayingFabric,
		getLayingInfoById,
		getInspectCodeList,
	} from "@/api/purchase/fabric.js";
	import {
		decodeParams
	} from "@/utils/common.js";
	import {
		formatSelectList
	} from "@/utils/business.js";
	export default {
		data() {
			return {
				formData: {},
				inspectCodeList: [],
				rules1: {
					cuttingDate: {
						rules: [{
							required: true,
							errorMessage: "请选择日期",
						}],
					},
					inspectCode: {
						rules: [{
							required: true,
							errorMessage: "不能为空",
						}],
					},
				},
			};
		},
		onLoad(options) {
			this.fetchEditData(decodeParams(options));
			this.fetchInspectCodeList();
		},
		created() {
			// this.fetchInspectCodeList();
		},
		methods: {
			fetchEditData(options) {
				this.formData = options;
			},
			handleSuccessImg(url) {
				this.formData.barcodeImage = url;
			},
			fetchInspectCodeList() {
				const cabinet = this.formData.cuttingCode.split('-')[0];
				getInspectCodeList({
					cabinetNum: cabinet
				}).then((res) => {
					const objs = res.rows;
					console.log('objs', objs)
					this.inspectCodeList = formatSelectList(objs, {
						text: "insCode",
						value: "insCode",
					});
				});
			},
			// 提交
			handleClickSubmit() {
				this.$refs.form1
					.validate()
					.then(() => {
						if (this.formData.id) {
							editCuttingLayingFabric(this.formData).then(() => {
								this.handleSuccess();
							});
						};
					})
					.catch((err) => {
						console.log("表单错误信息：", err);
					});
			},
			clearData() {
				this.formData = {};
			},
			handleSuccess() {
				this.$modal.msgSuccess("操作成功！");
				this.clearData();
				this.$nav.navigateBack();
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		padding: 10px;
	}

	.img-wrapper {
		height: 60px;
		width: 60px;
		border: 1px solid $uni-border-color;
	}
</style>